<!DOCTYPE html>


<!--  http://tutorialzine.com/2013/08/learn-angularjs-5-examples/ -->
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Angular Testing Services</title>
	<link rel="shortcut icon" href="../favicon.ico">
</head>
<body>

<style>

*{
	margin:0;
	padding:0;
}

body{
	font:15px/1.3 'Open Sans', sans-serif;
	color: #5e5b64;
	text-align:center;
}

a, a:visited {
	outline:none;
	color:#389dc1;
}

a:hover{
	text-decoration:none;
}

section, footer, header, aside, nav{
	display: block;
}

/*-------------------------
	The search input
--------------------------*/

.bar{
	background-color:#5c9bb7;

	background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
	background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
	background-image:linear-gradient(top, #5c9bb7, #5392ad);

	box-shadow: 0 1px 1px #ccc;
	border-radius: 2px;
	width: 580px;
	padding: 10px;
	margin: 45px auto 25px;
	position:relative;
	text-align:right;
	line-height: 1;
}

.bar a{
	background:#4987a1 center center no-repeat;
	width:32px;
	height:32px;
	display:inline-block;
	text-decoration:none !important;
	margin-right:5px;
	border-radius:2px;
	cursor:pointer;
}

.bar a.active{
	background-color:#c14694;
}

.bar a.list-icon{
	background-image:url();
}

.bar a.grid-icon{
	background-image:url();
}

.bar input{
	background:#fff no-repeat 13px 13px;

	border: none;
	width: 100%;
	line-height: 19px;
	padding: 11px 0;

	border-radius: 2px;
	box-shadow: 0 2px 8px #c4c4c4 inset;
	text-align: left;
	font-size: 14px;
	font-family: inherit;
	color: #738289;
	font-weight: bold;
	outline: none;
	text-indent: 40px;
}

/*-------------------------
	List layout
--------------------------*/

ul.list{
	list-style: none;
	width: 500px;
	margin: 0 auto;
	text-align: left;
}

ul.list li{
	border-bottom: 1px solid #ddd;
	padding: 10px;
	overflow: hidden;
}

ul.list li img{
	width:120px;
	height:120px;
	float:left;
	border:none;
}

ul.list li p{
	margin-left: 135px;
	font-weight: bold;
	color:#6e7a7f;
}

/*-------------------------
	Grid layout
--------------------------*/

ul.grid{
	list-style: none;
	width: 570px;
	margin: 0 auto;
	text-align: left;
}

ul.grid li{
	padding: 2px;
	float:left;
}

ul.grid li img{
	width:280px;
	height:280px;
	display:block;
	border:none;
}
</style>


<div ng-app="switchableGrid" ng-controller="SwitchableGridController">

	<div class="bar">

		<!-- These two buttons switch the layout variable,
			 which causes the correct UL to be shown. -->

		<a class="list-icon" ng-class="{active: layout == 'list'}" ng-click="layout = 'list'"></a>
		<a class="grid-icon" ng-class="{active: layout == 'grid'}" ng-click="layout = 'grid'"></a>
	</div>

	<!-- We have two layouts. We choose which one to show depending on the "layout" binding -->

	<ul ng-show="layout == 'grid'" class="grid">
		<!-- A view with big photos and no text -->
		<li ng-repeat="p in pics">
			<a href="{{p.link}}" target="_blank"><img ng-src="{{p.images.low_resolution.url}}" /></a>
		</li>
	</ul>

	<ul ng-show="layout == 'list'" class="list">
		<!-- A compact view smaller photos and titles -->
		<li ng-repeat="p in pics">
			<a href="{{p.link}}" target="_blank"><img ng-src="{{p.images.thumbnail.url}}" /></a>
			<p>{{p.caption.text}}</p>
		</li>
	</ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"></script>

<script>






// Define a new module. This time we declare a dependency on
// the ngResource module, so we can work with the Instagram API

var app = angular.module("switchableGrid", ['ngResource']);

// Create and register the new "instagram" service
app.factory('instagram', function($resource){

	return {
		fetchPopular: function(callback){

			// The ngResource module gives us the $resource service. It makes working with
			// AJAX easy. Here I am using the client_id of a test app. Replace it with yours.

			var api = $resource('https://api.instagram.com/v1/media/popular?client_id=:client_id&callback=JSON_CALLBACK',{
				client_id: '642176ece1e7445e99244cec26f4de1f'
			},{
				// This creates an action which we've chosen to name "fetch". It issues
				// an JSONP request to the URL of the resource. JSONP requires that the
				// callback=JSON_CALLBACK part is added to the URL.

				fetch:{method:'JSONP'}
			});

			api.fetch(function(response){

				// Call the supplied callback function
				callback(response.data);

			});
		}
	}

});

// The controller. Notice that I've included our instagram service which we
// defined below. It will be available inside the function automatically.

function SwitchableGridController($scope, instagram){

	// Default layout of the app. Clicking the buttons in the toolbar
	// changes this value.

	$scope.layout = 'grid';

	$scope.pics = [];

	// Use the instagram service and fetch a list of the popular pics
	instagram.fetchPopular(function(data){

		


		// Assigning the pics array will cause the view
		// to be automatically redrawn by Angular.
		$scope.pics = data;
	});

}

</script>


</body>
</html>